<template>

    <div class="box">
        <horder class="horder">
            <van-nav-bar title="购物车" />
        </horder>
        <main class="main">
            <div v-for="img in store.cartlist" v-lazy:background-image="img" >
            <van-empty v-if="store.cartlist.length == 0"
                image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                description="描述文字" />
         
            <van-swipe-cell v-else v-for="item in store.cartlist" :key="item.id">
                <van-card :num="item.count" :price="item.price" :title="item.title" :thumb="item.image">
                    <template #tag>
                        <div>
                            <van-checkbox v-model="item.checked"></van-checkbox>
                        </div>
                    </template>
                    <template #footer>
                        <div>
                            <van-stepper v-model="item.value" />
                        </div>
                    </template>

                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button"
                        @click="store.deleteItem(item.id)" style="height: 100%;"/>
                </template>
            </van-swipe-cell>

            <van-submit-bar :price="store.tatalPrice*100" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="allchecked">全选</van-checkbox>
                <template #tip>
                    你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
                </template>
            </van-submit-bar>
         </div>
        </main>

    </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'

const store = useCounterStore()
import { computed ,ref } from 'vue'
const isLoading=ref([])
const allchecked = computed({
  get() {
    if (store.cartlist.length == 0) {
      return false
    } else {
      return store.cartlist.every(item => item.checked == true)
    }
  },
  set(newval) {
    store.cartlist.forEach(item => item.checked = newval)
  }
})
setTimeout(() => {
        
        isLoading.value = false;
        
      }, 1000);
</script>

<style lang="scss" scoped></style>